import {useState} from "react";

const AddTask = ({onAdd}) => {
  const [text, setText] = useState('');
  const [day, setDay] = useState('');
  const [reminder, setReminder] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();

    if (!text) {
      alert('Please add text');
      return;
    }
    onAdd({text, day, reminder})

    setText("");
    setDay("");
    setReminder(false);


  };

  return (
    <form className="add-form" onSubmit={onSubmit}>
      <div className="form-controll">
        <label htmlFor="">Task</label>
        <input type="text" placeholder="Add Tasl" value={text} onChange={(e) => setText(e.target.value)}/>
      </div>
      <div className="form-controll">
        <label htmlFor="">Day & Time</label>
        <input type="text" placeholder="Add Day & Time" value={day} onChange={(e) => setDay(e.target.value)}/>
      </div>
      <div className="form-controll">
        <label htmlFor="">Set Reminder</label>
        <input type="checkbox" checked={reminder} value={reminder} onChange={(e) => setReminder(e.currentTarget.checked)}/>
      </div>

      <input type="submit" value="Save Task"/>

    </form>
  );

};

export default AddTask;
